<style>
    .box{
        /*display: flex;*/
        /*flex-wrap: wrap;*/
    }
    .box >div{
        margin-bottom: 20px;
        margin-right: 20px;
    }
</style>
<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label">商品分类</label>
            <div class="layui-input-block">
                <select name="cla_id" lay-verify="required" class="layui-input" lay-filter="cla_id">
                    <option value="">--请选择--</option>
                    {volist name="classfcation" id="v"}
                    <option value="{$v.id}">{$v.title}</option>
                    {/volist}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">商品名称</label>
            <div class="layui-input-block">
                <input type="text" name="title" class="layui-input" placeholder="请输入服务产品名称" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">商品图片</label>
            <div class="layui-input-block layuimini-upload">
                <input name="image" class="layui-input layui-col-xs6" readonly  placeholder="请上传商品图片" value="">
                <div class="layuimini-upload-btn">
                    <span><a class="layui-btn" data-upload="image" data-upload-number="one" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="type" lay-filter="levelM" class="layui-input" value="1" title="普通" >
                    <input type="radio" name="type" lay-filter="levelM" class="layui-input" value="2" title="精品" >
                </div>
        </div>
         
  
        <div class="layui-form-item">
            <label class="layui-form-label required">商品详情</label>
            <div class="layui-input-block">
                <textarea name="desc" rows="20" class="layui-textarea editor" placeholder="请输入服务详情">{$row.describe|default=''}</textarea>
            </div>
        </div>

        <div class="hr-line"></div>
        <div class="layui-form-item text-center">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>
    </form>
</div>
<script type="text/javascript">
    layui.use(['form','upload'], function(){
        var form = layui.form;
        var upload = layui.upload;
        $ = layui.$;
        layer = layui.layer;
        //各种基于事件的操作。
        $('#addrs').click(function (){
            var i = $('#rsbox >div').length
            $('#rsbox').append(`<div><input type="text" class="layui-input" placeholder="请输入人数"></div>`)
            $('#rsbox>div:last-child input').bind('change', setrsinp)
            setrsinp()
        })
        function setrsinp(){
            var str = ''
            $('#rsbox >div').map((item,index)=>{
                str += $(index).find('input').val()+','
            })
            str = str.slice(0,-1)
            $('#rsinp').val(str)
        }
        function setscinp(){
            var str = ''
            $('#scbox >div').map((item,index)=>{
                str += $(index).find('input').val()+','
            })
            str = str.slice(0,-1)
            $('#scinp').val(str)
        }
        $('#addsc').click(function (){
            var i = $('#scbox >div').length
            $('#scbox').append(`<div><input type="text" class="layui-input" placeholder="请输入时间"></div>
`)
            $('#scbox>div:last-child input').bind('change', setscinp)
            setscinp()
        })
        $('#scbox>div:last-child input').bind('change', setscinp)
        $('#rsbox>div:last-child input').bind('change', setrsinp)
        $('#removers').click(function (){
            var lastEl =  $('#rsbox').children().last()
            var count = $('#rsbox >div').length
            if(count>1){
                lastEl.remove()
            }else {
                layer.msg('不能删除最后一个')
            }
            setrsinp()
        })
        $('#removesc').click(function (){
            var lastEl =  $('#scbox').children().last()
            var count = $('#scbox >div').length
            if(count>1){
                lastEl.remove()
            }else {
                layer.msg('不能删除最后一个')
            }
            setscinp()
        })

    });
</script>
